<template>
	<view>
		<!-- 话题介绍 -->
		<TopicInfo :item="topicInfo"></TopicInfo>

		<SwiperTabHead :tabIndex="tabIndex" @ToChangeTab="tabtap" scrollItemStyle="width:50%;"
			scrollStyle="border-bottom:0" :tabBars="tabBars"></SwiperTabHead>

		
		
		
		<view class="topic-detail-list">
			<block v-for="(item,index) in tablist" :key="index">
				<template v-if="tabIndex==index">
					<!-- 列表 -->
					<block v-for="(list,listindex) in item.list" :key="listindex">
						<CommonList :item="list" :index="listindex"></CommonList>
					</block>
					<!-- 上拉加载 -->
					<LoadMore :loadtext="item.loadtext"></LoadMore>
				</template>
			</block>
		</view>




	</view>
</template>

<script>
	import TopicInfo from "../../components/topic-info/topic-info.vue";

	import SwiperTabHead from "../../components/index/swiper-tab-head.vue";
	import CommonList from "../../components/common/common-list.vue";
	import LoadMore from '../../components/common/load-more.vue'
	export default {

		components: {
			TopicInfo,
			SwiperTabHead,
			CommonList,
			LoadMore
		},


		// 监听下拉刷新  
		onPullDownRefresh() {
			console.log('我正在下拉刷新')
			this.getdata()
		},


		//上拉触底事件
		onReachBottom() {
			console.log('xxxx触底')
			this.loadmore()
		},
		
		 // beforeCreated() {}
		onLoad() {
			//获取内容高度
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100)
					console.log(height)
					this.swiperheight = height
				}
			})
		
		},




		data() {
			return {
				tabIndex: 0,
				swiperheight: 500, //设置初始化高度





				topicInfo: {
					titlepic: "../../static/demo/topicpic/13.jpeg",
					title: "忆往事，敬余生",
					desc: "我是描述",
					totalnum: 1000,
					todaynum: 1000,
				},

				tabBars: [{
						name: "默认",
						id: "moren"
					},
					{
						name: "最新",
						id: "zuixin"
					},
				],



				tablist: [{
						loadtext: "上拉加载更多",
						list: [
							// 文字
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "哈哈",
								sex: 0, //0 男 1 女
								age: 25,
								isguanzhu: false,
								title: "我是标题",
								titlepic: "",
								video: false,
								share: false,
								path: "深圳 龙岗",
								sharenum: 20,
								commentnum: 30,
								goodnum: 20
							},
							// 图文
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "哈哈",
								sex: 0, //0 男 1 女
								age: 25,
								isguanzhu: false,
								title: "我是标题",
								titlepic: "../../static/demo/datapic/13.jpg",
								video: false,
								share: false,
								path: "深圳 龙岗",
								sharenum: 20,
								commentnum: 30,
								goodnum: 20
							},
							// 视频
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "哈哈",
								sex: 0, //0 男 1 女
								age: 25,
								isguanzhu: false,
								title: "我是标题",
								titlepic: "../../static/demo/datapic/13.jpg",
								video: {
									looknum: "20w",
									long: "2:47"
								},
								share: false,
								path: "深圳 龙岗",
								sharenum: 20,
								commentnum: 30,
								goodnum: 20
							},
						]
					},
					{
						loadtext: "上拉加载更多",
						list: [
							// 文字
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "哈哈",
								sex: 0, //0 男 1 女
								age: 25,
								isguanzhu: false,
								title: "我是标题",
								titlepic: "",
								video: false,
								share: false,
								path: "深圳 龙岗",
								sharenum: 20,
								commentnum: 30,
								goodnum: 20
							},
							// 图文
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "哈哈",
								sex: 0, //0 男 1 女
								age: 25,
								isguanzhu: false,
								title: "我是标题",
								titlepic: "../../static/demo/datapic/13.jpg",
								video: false,
								share: false,
								path: "深圳 龙岗",
								sharenum: 20,
								commentnum: 30,
								goodnum: 20
							},
							// 视频
							{
								userpic: "../../static/demo/userpic/12.jpg",
								username: "哈哈",
								sex: 0, //0 男 1 女
								age: 25,
								isguanzhu: false,
								title: "我是标题",
								titlepic: "../../static/demo/datapic/13.jpg",
								video: {
									looknum: "20w",
									long: "2:47"
								},
								share: false,
								path: "深圳 龙岗",
								sharenum: 20,
								commentnum: 30,
								goodnum: 20
							},
						]
					}
				],



			}
		},

		methods: {

			//获取数据的方法 
			getdata() {
				// this.tablist=[];

				this.tablist[this.tabIndex].list = [];


				setTimeout(() => {




					var obj = {
						userpic: "../../static/demo/userpic/12.jpg",
						username: "哈哈",
						sex: 0, //0 男 1 女
						age: 25,
						isguanzhu: false,
						title: "我是标题",
						titlepic: "../../static/demo/datapic/13.jpg",
						video: false,
						share: false,
						path: "深圳 龙岗",
						sharenum: 20,
						commentnum: 30,
						goodnum: 20
					};

					this.tablist[this.tabIndex].list.push(obj);
					// 关闭下拉刷新  重新生成新的数据
					uni.stopPullDownRefresh();


					//  axios.get().then(res=>{
					//   // this.tablist=res.data
					// this.tablist[this.tabIndex].list=res.data

					//  })
				}, 1000)


			},


			tabChange() {
				// this.tabIndex = index
			},

			tabtap(index) {
				this.tabIndex = index
			},


			loadmore() {
				if (this.tablist[this.tabIndex].loadtext != "上拉加载更多") {
					return;
				}
				// alert('xxx')
				// 修改状态
				this.tablist[this.tabIndex].loadtext = "加载中...";
				// 获取数据
				setTimeout(() => {
					//获取完成
					let obj = {
						userpic: "../../static/demo/userpic/12.jpg",
						username: "哈哈",
						sex: 0, //0 男 1 女
						age: 25,
						isguanzhu: false,
						title: "我是标题",
						titlepic: "../../static/demo/datapic/13.jpg",
						video: false,
						share: false,
						path: "深圳 龙岗",
						sharenum: 20,
						commentnum: 30,
						goodnum: 20
					};
					this.tablist[this.tabIndex].list.push(obj);
					this.tablist[this.tabIndex].loadtext = "上拉加载更多";
				}, 1000);
				//this.tablist[this.tabIndex].loadtext="没有更多数据了";
			},

		}
	}
</script>

<style>

</style>
